<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>小程序商城（首页）</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_967867_c0tb9y0bpqb.css"/>
</head>
<body>
<!--导航-->
<nav flex="main:justify cross:center">
<div class="wu"></div>
<span>剁手一组.二组</span>
<div class="more" flex="main:justify  cross:center">
    <i class="iconfont icon-yduigengduo"></i>
    <span></span>
    <img src="../img/top1.png"/>
</div>

</nav>

<!--banner-->
<header>
    <div class="shuru" flex="cross:center">
        <i class="iconfont icon-chazhao1"></i>
        <input type="text" placeholder="请输入关键词进行搜索"/>
    </div>

</header>

<!--楼层1：产品分类-->
<section class="f1">
<ul flex>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_1">
            <i class="iconfont icon-tianchongxing-"></i>
        </div>
        <p>随便写的</p>
    </li>
    <li flex="main:justify dir:top cross:center" >
        <div flex="main:center cross:center" class="f1_2">
            <i class="iconfont icon-medicines1"></i>
        </div>
        <p>坚果炒货</p>
    </li>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_3">
            <i class="iconfont icon-lvguo"></i>
        </div>
        <p>果干蜜饯</p>
    </li>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_4">
            <i class="iconfont icon-shuihu-danse"></i>
        </div>
        <p>果干蜜饯</p>
    </li>
</ul>


<ul flex>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_5">
            <i class="iconfont icon-qiandai-tianchong"></i>
        </div>
        <p>糖果糕点</p>
    </li>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_6">
            <i class="iconfont icon-guantou"></i>
        </div>
        <p>五谷杂粮</p>
    </li>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_7">
            <img src="../img/bgan.png" alt=""/>
        </div>
        <p>饼干膨化</p>
    </li>
    <li flex="main:justify dir:top cross:center">
        <div flex="main:center cross:center" class="f1_8">
            <i class="iconfont icon-gengduofuwu"></i>
        </div>
        <p>优惠专区</p>
    </li>
</ul>
    
    
</section>

<!--***618大促-->
<section class="f2" flex="main:center cross:center">
    <a href=""> <img src="../img/cuxiao.png" alt=""/></a>
</section>


<!--楼层3：促销的产品-->
<section class="f3">
    
    <ul class="f3_1" flex="main:justify cross:center">
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">

                <div flex="cross:center" >
                    <h1>优惠卷</h1>
                    <h2>随时领取</h2>
                </div>

                <p>刷新超低折扣价</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                  <img src="../img/youhui01.png"/>
                 <img src="../img/youhui02.png"/>

            </div>

        </li>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">

                <div flex="cross:center" class="f3_tittle">
                    <h1>限时抢购</h1>
                    <h2>售完为止</h2>
                </div>

                <p>打破电商价格壁垒</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/youhui03.png"/>
                <img src="../img/youhui04.png"/>

            </div>

        </li>
    </ul>


    <ul class="f3_2" flex="main:justify cross:center">
        <li flex="main:justify cross:center">
            <div flex="main:justify cross:buttom dir:top" class="f3_tittle2">
                <h1>农庄有趣</h1>
                <p>当季蔬果抢鲜</p>
            </div>

            <div class="f3_tittleimg">
            <img src="../img/youhui05.png" />
            </div>

        </li>
        <li flex="main:justify cross:center">
            <div flex="main:justify cross:buttom dir:top" class="f3_tittle2">
                <h1>积分兑换</h1>
                <p>免费领好物</p>
            </div>

            <div class="f3_tittleimg">
                <img src="../img/youhui06.png" />
            </div>

        </li>
    </ul>


    <ul class="f3_2" flex="main:justify cross:center">
        <li flex="main:justify cross:center">
            <div flex="main:justify cross:buttom dir:top" class="f3_tittle2">
                <h1>一元拼团</h1>
                <p>拼团享低价</p>
            </div>

            <div class="f3_tittleimg">
                <img src="../img/youhui07.png" />
            </div>

        </li>
        <li flex="main:justify cross:center">
            <div flex="main:justify cross:buttom dir:top" class="f3_tittle2">
                <h1>七折直销</h1>
                <p>买到就是赚到</p>
            </div>

            <div class="f3_tittleimg">
                <img src="../img/youhui08.png" />
            </div>

        </li>
    </ul>


</section>

<!--商城论坛-->
<section class="f4">
    <img src="../img/sclt.png" />

</section>

<!--播放视频-->
<section class="f5">
    <img src="../img/video.png" />
</section>

<!--掌柜推荐-->
<section class="f6" flex="cross:center">
<span></span>
<span>掌柜推荐</span>
<span>High quality recommendation</span>
</section>

<!--掌柜推荐:第一排-->
<section class="f7">
<ul flex>
    <li flex="main:center cross:center" class="f7_1">
        <img src="../img/tuijian01.png"/>
        <div flex="main:justify dir:top cross:center" >
            <h1>原生态野百花蜜</h1>
            <h2>森农良品</h2>
            <p>福建连城特产美食</p>
        </div>

    </li>


    <li flex="main:center cross:center" class="f7_1">
        <img src="../img/tuijian02.png"/>
        <div flex="main:justify dir:top cross:center" >
            <h1>盛耳银耳白木耳</h1>
            <h2>象湖人家</h2>
            <p>福建银耳干货</p>
        </div>

    </li>

</ul>

</section>

<!--掌柜推荐:第二+三排-->

<section class="f8">
    <ul flex>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                    <h1>东北野生猴头菇</h1>

                <p>健康美味干货</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/tuijian04.png"/>
                <img src="../img/tuijian03.png"/>

            </div>

        </li>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>特产黑木耳干货</h1>

                <p>农家自产</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/tuijian05.png"/>
                <img src="../img/tuijian06.png"/>

            </div>

        </li>
    </ul>

    <ul flex>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>农家豆干</h1>

                <p>漳平特产</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/tuijian07.png"/>
                <img src="../img/tuijian08.png"/>

            </div>

        </li>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>草菇食用菌</h1>

                <p>个大肉厚</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/tuijian09.png"/>
                <img src="../img/tuijian10.png"/>

            </div>

        </li>
    </ul>

</section>



<!--热销排行-->


<!--掌柜推荐-->
<section class="f6" flex="cross:center">
    <span></span>
    <span>热销排行</span>
    <span>Top selling</span>
</section>


<section class="f8">
    <ul flex>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>大井头青豆腐竹</h1>

                <p>健康美味干货</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/rexiao01.png"/>
                <img src="../img/rexiao02.png"/>

            </div>

        </li>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>秘制辣猪肉条</h1>

                <p>美味香辣</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/rexiao03.png"/>
                <img src="../img/rexiao04.png"/>

            </div>

        </li>
    </ul>

    <ul flex>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>客家炒米粉</h1>

                <p>手工米线</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/rexiao05.png"/>
                <img src="../img/rexiao06.png"/>

            </div>

        </li>
        <li>

            <div class="f3_shang" flex="cross:buttom dir:top main:center">
                <h1>麻辣香辣牛肉丝</h1>

                <p>龙岩特产</p>

            </div>

            <div class="f3_xia" flex="main:justify cross:center">
                <img src="../img/rexiao07.png"/>
                <img src="../img/rexiao08.png"/>

            </div>

        </li>
    </ul>

</section>

<!--底部-->
<footer>
<ul flex>
    <li flex="main:center dir:top cross:center">
        <i class="iconfont icon-shouye"></i>
        <p>首页</p>
    </li>


    <li flex="main:center dir:top cross:center">
        <i class="iconfont icon-leimupinleifenleileibie"></i>
        <p>分类</p>
    </li>

    <li flex="main:center dir:top cross:center">
        <i class="iconfont icon-gouwuche"></i>
        <p>购物车</p>
    </li>

    <li flex="main:center dir:top cross:center">
        <i class="iconfont icon-gerenzhongxin"></i>
        <p>个人中心</p>
    </li>

</ul>

</footer>


</body>
</html>